<script lang="ts" setup>
import { ref } from 'vue';
import { containerProps } from './container';
defineOptions({ name: 'WindowsContainer' });
const props = defineProps(containerProps);
</script>

<template>
  <div class="windows-container">
    <div class="windows-container-btn-group">
      <div class="windows-container-btn-item" v-for="item in props.buttons" @click="item.fn()">
        <el-icon :class="{ disabled: item.disabled }">
          <component :is="item.icon" />
        </el-icon>
        <span v-if="item.name">{{ item.name }}</span>
      </div>
    </div>
    <!-- <div class="windows-container-crumbs">
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item>此系统</el-breadcrumb-item>
        <el-breadcrumb-item>系统中心</el-breadcrumb-item>
        <el-breadcrumb-item>模块管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <div class="windows-container-content">
      <div class="windows-container-content-left">
        <slot name="mainleft"></slot>
      </div>
      <div class="windows-container-content-right">
        <el-collapse value="1" accordion v-if="props.showSearcher">
          <el-collapse-item title="展开搜索条件" name="1">
            <slot name="search"></slot>
          </el-collapse-item>
        </el-collapse>
        <slot></slot>
        <div class="windows-container-pagination">
          <slot name="pagination"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.windows-container-content-right {
  .el-pagination {
    height: 35px;
  }
  .el-collapse-item__header {
    height: 35px;
    border-bottom: 1px solid #ebeef5;
    padding-left: 10px;
  }
  .el-collapse-item__content {
    padding: 0px 5px;
    margin-top: 18px;
  }
  .el-select,
  .el-input-number {
    width: 100%;
  }
  .el-form-item {
    padding: 0px 5px;
  }
}
.windows-container-content {
  .el-tree-node__content {
    &:hover {
      background: rgba(198, 226, 255, 1);
    }
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: rgba(198, 226, 255, 1);
  }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(198, 226, 255, 1);
  }
}
</style>
<style scoped lang="scss">
.windows-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .windows-container-btn-group {
    background: rgb(240, 243, 249);
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    .windows-container-btn-item {
      padding: 8px 8px;
      margin-right: 15px;
      display: flex;
      border-radius: 5px;
      cursor: pointer;
      align-items: center;
      color: #606266;
      &:hover {
        background: #e5e5e5;
      }
      > .el-icon {
        font-size: 20px;
      }
      > span {
        font-size: 12px;
        margin-left: 5px;
      }
    }
    .disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  .windows-container-crumbs {
    .el-breadcrumb {
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
      background: #ffffff;
      padding: 10px;
    }
  }
  .windows-container-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    .windows-container-content-left {
      border-right: 1px solid #dcdfe6;
      overflow: auto;
    }
    .windows-container-content-right {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
  }
}
</style>
